<template>
  <div>
    <!-- 用户信息 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="user">用户昵称：</div>
      </el-col>
      <el-col :span="6">
        <div class="name" style="margin-left:-60px">{{userMessage.beReportUserName}}</div>
      </el-col>
      <el-col :span="6">
        <div class="user">宠物昵称：</div>
      </el-col>
      <el-col :span="6">
        <div class="name" style="margin-left:-60px">{{userMessage.petName}}</div>
      </el-col>
    </el-row>
    <!-- 用户内容 -->
    <el-row style="margin-top:20px">
      <el-col :span="4">
        <div class="user">动态内容：</div>
      </el-col>
      <el-col :span="20">
        <div class="name" style="margin-left:-20px">{{userMessage.postContent}}</div>
      </el-col>
    </el-row>

    <!-- 图片显示 -->
    <div>
      <template v-for="item in userMessage.mediaList">
        <!-- 图片展示数据 -->
        <template v-if="item.meidaType==2?true:false">
          <el-image
            :key="item.id"
            style="width: 100px; height: 100px;margin-left:26px;margin-top:22px"
            :src="item.mediiaUrl"
            @click="preview(item.mediiaUrl)"
          ></el-image>
        </template>

         <!-- 展示视频播放 -->
        <template v-if="item.meidaType==1?true:false">
          <video
            style="width:100%; height: 250px;margin-top:22px"
            :key="item.id"
            :src="item.mediiaUrl"
            controls="controls"
          >您的浏览器不支持视频播放</video>
        </template>
      </template>
    </div>

    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 用户评论的内容 -->

    <el-row style="margin-top:20px" >
      <el-col :span="4">
        <!-- <div class="user">{{userMessage.reportContent==''?'举报用户':'举报理由'}}：</div> -->
        <div class="user">举报用户：</div>
        <div class="user" style="margin-top:20px">举报理由：</div>
      </el-col>
    
      <el-col :span="16">
        <div class="name">{{userMessage.userName}}</div>
        <div class="name" style="margin-top:20px">{{userMessage.reportContent}}</div>
        <!-- <div class="name">{{userMessage.reportContent==''?userMessage.beReportUserName:userMessage.reportContent}}</div> -->
      </el-col>
      <el-col :span="4">
        <div class="name">
          <el-button
            type="primary"
            size="small"
            @click="shield(userMessage)"
          >{{userMessage.reportStatus==1?"屏蔽":'解除屏蔽'}}</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- <div class="currentpages">
      <el-pagination
        layout="prev, pager, next"
        :total="commentTotal"
        :page-size="10"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div> -->
    <!-- 测试图片预览 -->
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    merchant: Boolean,
    userMessage: Object,
    // comment: Array,
    commentTotal: Number
  },
  data() {
    return {
      //图片预览
      dialogImageUrl: "",
      dialogVisible: false,
      shows: false
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("currentpage", val);
      console.log("分页", this.commentTotal);
    },
    // 每页多少
    handleSizeChange(val) {
      console.log("每页多少", val);
    },
    // 屏蔽
    shield(val) {
      this.$emit("commentshield", val);
      console.log('获取数据',val);
    },
    // 预览图片
    preview(val) {
      this.dialogImageUrl = val;
      this.dialogVisible = true;
      this.shows = true;
      console.log("预览图片", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.currentpages {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.user {
  font-weight: bold;
}
.name {
  text-align: left;
}
</style>